<!--
 * @Author: jiutian
 * @Date: 2023-01-31 11:22:50
 * @LastEditTime: 2023-02-02 14:04:09
 * @LastEditors:  
-->
<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";
import request from "@api";
import md5 from "md5";
import { useRouter } from "vue-router";

const $router = useRouter();
interface FormData {
  password: string;
  checkPwd: string;
  phoneNumber: string;
  smsCode: string;
}
const validatePhone = (rule: any, value: any, callback: any) => {
  if (
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
      value
    )
  ) {
    callback();
  } else {
    callback(new Error("请输入正确的手机格式"));
  }
};

const validateCheckPwd = (rule: any, value: any, callback: any) => {
  if (value != formData.password) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};

let formData: FormData = reactive({
  password: "",
  checkPwd: "",
  phoneNumber: "",
  smsCode: "",
});
let formRef = ref<FormInstance>();
let phoneNumberRef = ref();
let time = ref(60);
let timer = ref();
let isSend = ref(false);
let errorTxt = ref("");
let showPwd = ref(false);
let showCheckPwd = ref(false);
let rules = reactive<FormRules>({
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  checkPwd: [
    { required: true, message: "请确认密码", trigger: "blur" },
    { validator: validateCheckPwd, trigger: "blur" },
  ],
  phoneNumber: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { validator: validatePhone, trigger: "blur" },
  ],
  smsCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

function sengMsg() {
  phoneNumberRef.value
    .validate()
    .then(() => {
      isSend.value = true;
      timer.value = setInterval(() => {
        time.value--;
        if (time.value < 0) {
          isSend.value = false;
          time.value = 60;
          clearInterval(timer.value);
          timer.value = null;
        }
      }, 1000);
      request["entry/sendMsg"]({
        data: {
          phoneNumber: formData.phoneNumber,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          ElNotification({
            type: "success",
            title: "提示",
            message: res.msg,
            showClose: false,
          });
        } else {
          ElNotification({
            type: "error",
            title: "提示",
            message: res.msg,
            showClose: false,
          });
        }
      });
    })
    .catch(() => {});
}

function save() {
  formRef.value?.validate((valid) => {
    if (valid) {
      if (!isSend.value && formData.smsCode)
        return (errorTxt.value = "请先发送验证码");
      request["entry/resetPwd"]({
        data: {
          phoneNumber: formData.phoneNumber,
          password: md5(formData.password),
        },
      }).then((res: any) => {
        if (res.code == 200) {
          ElNotification({
            type: "success",
            title: "提示",
            message: res.msg,
            showClose: false,
          });
          $router.replace({
            name: "login",
          });
        } else {
          if (res.error) {
            errorTxt.value = res.msg;
            ElNotification({
              type: "error",
              title: "提示",
              message: res.msg,
              showClose: false,
            });
          } else {
            ElNotification({
              type: "error",
              title: "提示",
              message: res.msg,
              showClose: false,
            });
          }
        }
      });
    }
  });
}
</script>

<template>
  <div class="forget">
    <div class="mian_box">
      <el-form
        label-width="78px"
        ref="formRef"
        :rules="rules"
        :model="formData"
      >
        <el-form-item
          label="手机号"
          ref="phoneNumberRef"
          size="large"
          prop="phoneNumber"
        >
          <el-input
            placeholder="请输入手机号"
            v-model.trim="formData.phoneNumber"
          />
        </el-form-item>
        <el-form-item size="large" label="密码" prop="password" class="pwd">
          <el-input
            placeholder="请输入密码"
            :type="showPwd ? 'text' : 'password'"
            v-model.trim="formData.password"
          />
          <el-icon
            v-if="formData.password"
            class="ElIcon"
            @click="showPwd = !showPwd"
            color="#999"
          >
            <View v-if="!showPwd" />
            <Hide v-else />
          </el-icon>
        </el-form-item>
        <el-form-item size="large" label="确认密码" prop="checkPwd" class="pwd">
          <el-input
            placeholder="请输入密码"
            :type="showCheckPwd ? 'text' : 'password'"
            v-model.trim="formData.checkPwd"
          />
          <el-icon
            v-if="formData.checkPwd"
            class="ElIcon"
            @click="showCheckPwd = !showCheckPwd"
            color="#999"
          >
            <View v-if="!showCheckPwd" />
            <Hide v-else />
          </el-icon>
        </el-form-item>
        <el-form-item
          label="验证码"
          size="large"
          class="smsCode"
          prop="smsCode"
          :error="errorTxt"
        >
          <el-input
            placeholder="请输入验证码"
            maxlength="6"
            v-model.trim="formData.smsCode"
          />
          <el-button type="primary" :disabled="isSend" @click="sengMsg">{{
            isSend ? time + "秒后可重发" : "发送验证码"
          }}</el-button>
        </el-form-item>
        <el-form-item class="btn_formitem"
          ><el-button type="primary" @click="save"
            >重置</el-button
          ></el-form-item
        >
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.forget {
  background-color: #ededed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  .mian_box {
    margin-top: 15vh;
    width: 450px;
    height: 350px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep() {
      .smsCode {
        .el-form-item__content {
          flex-wrap: nowrap;
          .el-input__wrapper {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
          }
          .el-button {
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            padding: 12px;
            width: 120px;
          }
        }
      }

      .btn_formitem {
        .el-form-item__content {
          margin-left: 0 !important;
          .el-button {
            width: 100%;
          }
        }
      }

      .pwd {
        position: relative;
        .ElIcon {
          position: absolute;
          top: 50%;
          right: 5px;
          transform: translate(-50%, -50%);
        }
        .el-input__wrapper {
          padding-right: 35px;
        }
      }
    }
  }
}
</style>